<template>
    <div class="main_container">
        <div v-if="pageName=='index'">
            <el-form :model="queryParams" label-width="110px">
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="角色名:">
                            <el-input style="width: 240px;" maxlength="20" v-model="queryParams.search" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-button size="small" icon="el-icon-search" @click="handleQuery"
                            style="margin: 8px 0 0 20px;" class="btn_primary_color">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-row :gutter="16" class="mb8">
                <el-col :span="1.5">
                    <el-button
                    class="btn_primary_color"
                    icon="el-icon-plus"
                    size="small"
                    @click="handleAdd"
                    v-hasPermi="['role_add']"
                    >新增</el-button>
                </el-col>
            </el-row>

            <el-table border :data="roleList" style="margin-top: 15px;" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="60" align="center" />
                <el-table-column label="角色名" width="200" align="left" prop="name" />
                <el-table-column label="排序" width="100" align="left" prop="sort" />
                <el-table-column label="是否启用" width="100" align="left" prop="statusName" />
                <el-table-column label="描述" align="left" prop="remark" />
                <el-table-column label="操作" width="200" align="left" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleView(scope.row)"
                            style="font-weight: bold;"
                        >查看</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            v-if="!scope.row.perms_frozen"
                            @click="handleEdit(scope.row)"
                            style="font-weight: bold;"
                            v-hasPermi="['role_update']"
                        >编辑</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            v-if="!scope.row.perms_frozen"
                            @click="handleRemove(scope.row)"
                            style="font-weight: bold;"
                            v-hasPermi="['role_del']"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-show="total>0"
                background
                style="padding: 32px 16px;background: #fff;text-align: right;"
                @size-change="getRoles"
                @current-change="getRoles"
                :current-page.sync="pageParam.page"
                :page-size="pageParam.num"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <!-- 新增页面 -->
        <common-dialog :visiable="pageName == 'addRole'">
            <add :corpId="corp_id" @success="success" @hidden="hidden"></add>
        </common-dialog>

        <!-- 编辑页面 -->
        <common-dialog :visiable="pageName == 'editRole'">
            <add :corpId="corp_id" :editId="editId" @success="success" @hidden="hidden"></add>
        </common-dialog>

        <!-- 查看 -->
        <el-dialog class="role_dialog" destroy-on-close center :visible.sync="showRoleInfo" width="60%" title="查看角色信息" append-to-body>
            <el-row>
                <el-form ref="viewForm" :model="viewForm" size="small" label-width="auto">
                    <el-col :span="12">
                        <el-form-item label="角色名称：">
                            <div>{{ viewForm.name }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排序：">
                            <div>{{ viewForm.sort }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否启用：">
                            <div>{{ viewForm.statusName }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="权限：">
                            <div>{{ viewForm.permissionNames }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="角色描述：">
                            <div>{{ viewForm.remark }}</div>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div slot="footer">
                <el-button @click="showRoleInfo=false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import commonDialog from "@/components/commonDialog";
import { listRole, removeRole } from '@/api/role';

export default {
    name: 'roleList',
    data() {
        return {
            showRoleInfo: false,
            multiple: true, // 非多个禁用
            corp_id: '',
            editId: null, 
            pageName: 'index',
            queryParams: {
                search: '',
                corp: ''
            },
            pageParam: {
                page: 1,
                num: 10
            },
            total: 0,
            roleList: [],
            viewForm: {}
        }
    },
    components: {
        commonDialog,
        add: () => import('./edit.vue'),
    },
    created() {
        this.corp_id = this.$store.state.corpId
        this.queryParams.corp = this.corp_id
        this.getRoles()
    },
    methods: {
        // 按条件筛选
        handleQuery() {
            this.pageParam.page = 1
            this.getRoles()
        },
        // 角色列表
        getRoles() {
            let params = Object.assign({}, this.queryParams, this.pageParam)
            listRole(params).then(res => {
                this.roleList = res.data.data.role_list.filter(item => {
                    item.statusName = item.status ? '启用' : '禁用'
                    return item
                })
                this.total = res.data.data.total
            })
        },
        // 多选框选中数据
        handleSelectionChange (selection) {
            // console.log(selection);
            this.multiple = !selection.length
        },
        // 新增
        handleAdd() {
            this.editId = null
            this.pageName = 'addRole'
        },
        // 编辑
        handleEdit(item) {
            this.editId = item.id
            this.pageName = 'editRole'
        },
        // 删除
        handleRemove(item) {
            let that = this
            this.$confirm('您确定要删除该角色吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeRole(item.id, {
                    corp: that.corp_id
                }).then(res => {
                    if (res.code == 200){
                        that.handleQuery()
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        })
					}
                })
            }).catch(() => {        
            });
        },
        // 查看
        handleView(item) {
            item.permissionNames = item.permissions_detail.map(item => item.permission_name).join('、')
            this.viewForm = item
            this.showRoleInfo = true
        },
        hidden() {
            this.pageName = 'index'
        },
        success() {
            this.pageName = 'index'
            this.handleQuery()
        },
    }
}
</script>

<style lang="less" scoped>
    @import '../../../style/mixin.less';

</style>

<style>
    .role_dialog .el-dialog__body {
        max-height: 400px;
        overflow-y: auto;
    }
</style>